/* eslint-disable no-shadow */
import React, { Component } from 'react';
import Taro, { Config, getCurrentInstance } from '@tarojs/taro';
import { Fragment } from 'react'
import { connect } from 'react-redux'
import { View, Image, Text } from '@tarojs/components'
import { AtRate, AtButton } from 'taro-ui'
import { getStoreInfo } from '@/api'
import { hasPrevRoute } from '@/utils/global'
import { updateStore } from '@/store/location/action'
const Phone = 'https://static3.jekunauto.com/img/others/phone.png'
const Navigation = 'https://static3.jekunauto.com/img/others/navigation.png'
const tipsDetailStore = 'https://static3.jekunauto.com/img/others/tips-detail_store.png'
import './index.scss'

interface State {
  store: {
    storeCode: string
    longitude: string
    latitude: string
    distance: string
  }
  goods: {
    topImage: string
    storeName: string
    address: string
    startTime: string
    endTime: string
    phone: string
    facade: Array<string>
    environment: Array<string>
    station: Array<string>
    comment: Array<any>
  }
}

@connect<any>(({ location, user }) => ({ location, user }), _dispatch => ({
  dispatchStore(params) {
    return _dispatch(updateStore(params))
  }
}))
export default class Index extends Component<any> {
  $instance = getCurrentInstance();
  constructor () {
    super(...arguments)
    this.state = {
      store: {// 门店信息
        storeCode: '',// 门店编码
        longitude: '',// 经度
        latitude: '',// 维度
        distance: '',// 距离
      },
      goods: {// 门店信息
        topImage: '',// 头图
        storeName: '',// 门店名称
        address: '',// 地址
        startTime: '',// 开始营业时间
        endTime: '',// 结束营业时间
        phone: '',// 电话
        facade: [],// 门店图片
        environment: [],// 环境图片
        station: [],// 工位图片
        comment: [],// 评价
      },
    }
  }
  state: State

  UNSAFE_componentWillMount() { }
  async componentDidMount() {
    const { list } = this.$instance.router.params
    if (list) {
      this.setState({
        store: JSON.parse(list),
      }, () => {
        this.getStoreInfo()
      })
    }
  }
  UNSAFE_componentWillReceiveProps(nextProps, nextContext) { }
  componentWillUnmount() { }
  componentDidShow() { }
  componentDidHide() { }
  componentDidCatchError() { }
  componentDidNotFound() { }

  // 获取门店详情
  getStoreInfo() {
    const { store: { storeCode } } = this.state
    getStoreInfo({ storeCode }).then((res) => {
      const { data: { data, success } } = res
      if (success) {
        this.setState({
          goods: data
        })
      }
    })
  }

  //预览评价图片
  previewImage(current, urls) {
    Taro.previewImage({
      current, // 当前显示图片的http链接
      urls, // 需要预览的图片http链接列表
    })
  }

  // 设置时间格式
  setDate(date) {
    const time = new Date(Number(date + '000'))
    return `${time.getFullYear()}年${this.completion(time.getMonth() + 1)}月${this.completion(time.getDate())}日`
  }

  //补0
  completion(val) {
    if (val < 10) {
      return '0' + val
    } else {
      return val
    }
  }

  // 修改门店
  async changeStore() {
    const { dispatchStore } = this.props
    const { store } = this.state
    await dispatchStore(store)
    this.setState({
      store
    }, () => {
      Taro.showToast({
        title: '切换门店成功',
        icon: 'none',
        duration: 1800,
        complete: () => {
          if (hasPrevRoute()) {
            const Pages = Taro.getCurrentPages()
            if (Pages[Pages.length - 2].route == 'pages/tabbar/store/index') {
              Taro.switchTab({ url: '/pages/tabbar/index/index' })
            } else {
              Taro.navigateBack({
                delta: 2
              })
            }
          } else {
            Taro.switchTab({ url: '/pages/tabbar/index/index' })
          }
        }
      })
    })
  }

  render() {
    const { goods, store: { distance, longitude, latitude } } = this.state

    return (
      <View className="box">
        {
          goods &&
          <Fragment>
            <View className="head">
              <Image className="head_bg" mode='aspectFill' src={goods.topImage.length > 0 ? goods.topImage[0] : tipsDetailStore} />
            </View>
            {/* 门店信息 */}
            <View className="store">
              <View className="store_head">
                <View className="store_name">{goods.storeName}</View>
                <View className="store_message">
                  <View className="store_message_title">门店地址：</View>
                  <View className="store_message_text">{goods.address}</View>
                </View>
                <View className="store_message">
                  <View className="store_message_title">营业时间：</View>
                  <View className="store_message_text">{goods.startTime}-{goods.endTime}</View>
                </View>
              </View>
              <View className="store_operation">
                <View className="store_operation_main" onClick={() =>
                  // 拨打电话
                  Taro.makePhoneCall({ phoneNumber: goods.phone })
                }>
                  <Image src={Phone} className="store_operation_main_img" />
                  <View className="store_operation_main_text">{goods.phone}</View>
                </View>
                <View className="store_operation_main" onClick={() => {
                  // 使用微信内置地图查看位置
                  Taro.openLocation({
                    latitude: Number(latitude),
                    longitude: Number(longitude),
                    scale: 18,
                    name: goods.storeName,
                    address: goods.address
                  })
                }}>
                  <Image src={Navigation} className="store_operation_main_img" />
                  <View className="store_operation_main_text">{distance}km</View>
                </View>
              </View>
            </View>
            {/* 门店环境 */}
            {
              // 门面照片
              goods.facade && goods.facade.length > 0 &&
              <View className="environment">
                <View className="environment_main">
                  <View className="environment_main_name">门面照片</View>
                  <View className="environment_main_img">
                    {
                      goods.facade.map((val) => {
                        return <Image className="photo" mode='aspectFill' src={val} key={val} onClick={() => this.previewImage(val, goods.facade)} />
                      })
                    }
                  </View>
                </View>
              </View>
            }

            {
              // 环境图片
              goods.environment && goods.environment.length > 0 &&
              <View className="environment">
                <View className="environment_main">
                  <View className="environment_main_name">环境图片</View>
                  <View className="environment_main_img">
                    {
                      goods.environment.map((val) => {
                        return <Image className="photo" mode='aspectFill' src={val} key={val} onClick={() => this.previewImage(val, goods.environment)} />
                      })
                    }
                  </View>
                </View>
              </View>
            }

            {
              // 工位图片
              goods.station && goods.station.length > 0 &&
              <View className="environment">
                <View className="environment_main">
                  <View className="environment_main_name">工位图片</View>
                  <View className="environment_main_img">
                    {
                      goods.station.map((val) => {
                        return <Image className="photo" mode='aspectFill' src={val} key={val} onClick={() => this.previewImage(val, goods.station)} />
                      })
                    }
                  </View>
                </View>
              </View>
            }

            {/* 服务评价 */}
            {
              goods.comment && goods.comment.length > 0 &&
              <View className="evaluate">
                <View className="evaluate_name">服务评价</View>
                <View className="evaluate_list">
                  {
                    goods.comment.map((val) => {
                      return <View className='evaluate_detail' key={val.carLicense}>
                        <View className='head'>
                          <View className='head-top'>
                            <View className='left'>
                              <View className='left-wrap'>
                                <Image className='brand-img' mode='aspectFill' src={val.brandLogo} lazyLoad />
                                <Text className='car-license'>{val.carLicense}</Text>
                              </View>
                              <Text className='brand-name'>{val.carBrandName}</Text>
                            </View>
                            <Text className='date'>{this.setDate(val.createdAt)}</Text>
                          </View>
                          <View className='head-bottom'>
                            <Text className='range-text'>评分:</Text>
                            <AtRate size={15} value={val.goodsGrade} />
                          </View>
                        </View>
                        <View className='content'>
                          <View className='content-desc'>
                            {val.commentContent}
                          </View>
                          {
                            val.coverImgUrl && val.coverImgUrl.length > 0 &&
                            <View className='content-pics'>
                              {val.coverImgUrl.map((url) => <Image className='img' mode='aspectFill' src={url} lazyLoad onClick={() => this.previewImage(url, val.coverImgUrl)} />)}
                            </View>
                          }
                        </View>
                      </View>
                    })
                  }
                </View>
              </View>
            }
            <View className='btn'>
              <AtButton className="submit-btn" type='primary' onClick={() => this.changeStore()}>去养车</AtButton>
            </View>
          </Fragment>
        }
      </View>
    )
  }
}
